<route lang="json5">
{
  style: {
    navigationBarTitleText: '操作指引',
    navigationBarBackgroundColor: '#FFFFFF',
  },
}
</route>

<template>
  <navbar text="操作指引" />
  <view class="scroll">
    <view
      class="public-page public-background"
      :style="{ height: `calc(100vh - ${safeAreaInsets?.top}px - 44px)` }"
    >
      <view class="public-height"></view>
      <view class="list">
        <view class="title" @click="listShow(1)">
          <uv-text align="left" color="#000000" size="32rpx" text="如何绑定登记？"></uv-text>
          <uv-text align="right" :color="'#666666'" size="26rpx" text=""></uv-text>
        </view>
        <view class="content" :class="{ 'expand-content': true, open: listShow1 }">
          <view class="active">
            <text class="title-font">一、绑定账户</text>
            <text class="info">
              1、注册账户：使用手机微信扫描功能，扫描蓝牙网关机身二维码，或者微信搜索“心康医疗AI”进入小程序。按照界面指引，完成用户注册。
            </text>
            <text class="info">
              2、
              绑定设备：点击小程序主界面“扫描绑定设备”按钮，再次扫描蓝牙网关机身二维码，将注册用户与设备信息（蓝牙网关、心电记录仪）绑定。
            </text>
            <uv-image
              src="https://ai-ecg-beta.lifesense.com/resources/images/device_Code.png"
              mode="widthFix"
              :customStyle="{
                display: 'block',
                margin: '20rpx auto',
              }"
            >
              <template v-slot:loading>
                <uv-loading-icon mode="spinner"></uv-loading-icon>
              </template>
            </uv-image>
            <text class="info">小程序主页面上手机图标由灰色变为高亮，表示绑定成功。</text>
            <uv-image
              src="https://ai-ecg-beta.lifesense.com/resources/images/bind.jpg"
              mode="widthFix"
              :customStyle="{
                display: 'block',
                margin: '20rpx auto',
              }"
            >
              <template v-slot:loading>
                <uv-loading-icon mode="spinner"></uv-loading-icon>
              </template>
            </uv-image>
            <text class="title-font">二、连接设备</text>
            <text class="info">
              1、
              适配器通电：将包装内电源适配器接入220V电源插座，将适配器的5V电源输出口通过USB线缆连接到蓝牙适配器的5V电源输入口（TypeC）。此时蓝牙适配器红灯如图亮起。
            </text>
            <uv-image
              src="https://ai-ecg-beta.lifesense.com/resources/images/hub_red_green.png"
              mode="widthFix"
              :customStyle="{
                display: 'block',
                margin: '20rpx auto',
              }"
            >
              <template v-slot:loading>
                <uv-loading-icon mode="spinner"></uv-loading-icon>
              </template>
            </uv-image>
            <text class="info">
              2、自动联网：蓝牙网关出厂内置了sim卡，会自动联网。联网成功后，绿灯亮想，小程序界面如图示，蓝牙网关图标高亮，显示“hub在线”。
            </text>
            <uv-image
              src="https://ai-ecg-beta.lifesense.com/resources/images/bindDevice.jpg"
              mode="widthFix"
              :customStyle="{
                display: 'block',
                margin: '20rpx auto',
              }"
            >
              <template v-slot:loading>
                <uv-loading-icon mode="spinner"></uv-loading-icon>
              </template>
            </uv-image>
            <text class="info">
              3、按住记录仪上方按钮3秒，记录仪绿灯亮并震动表示开机。松开按键，等待20秒左右，蓝牙网关上蓝灯亮起，表示心电记录仪与蓝牙网关蓝牙连接成功。
            </text>
            <uv-image
              src="https://ai-ecg-beta.lifesense.com/resources/images/blue_green.png"
              mode="widthFix"
              :customStyle="{
                display: 'block',
                margin: '20rpx auto',
              }"
            >
              <template v-slot:loading>
                <uv-loading-icon mode="spinner"></uv-loading-icon>
              </template>
            </uv-image>
            <text class="info">4、小程序上记录仪图标高亮，显示“记录仪在线”。</text>
            <uv-image
              src="https://ai-ecg-beta.lifesense.com/resources/images/bindDeviceHub.jpg"
              mode="widthFix"
              :customStyle="{
                display: 'block',
                margin: '20rpx auto',
              }"
            >
              <template v-slot:loading>
                <uv-loading-icon mode="spinner"></uv-loading-icon>
              </template>
            </uv-image>
            <text class="title-font">三、登记检查信息</text>
            <text class="info">
              1、点击“预约登记”按钮，跳转到预约登记页面，填入姓名（必填）、性别、年龄、身高、体重等信息。
            </text>
            <text class="info">2、点击“录入用户信息”可以快捷填入当前用户信息。</text>
            <text class="info">3、点击“提交”按钮完成信息登记流程。</text>
            <uv-image
              src="https://ai-ecg-beta.lifesense.com/resources/images/dengji.png"
              mode="widthFix"
              :customStyle="{
                display: 'block',
                margin: '20rpx auto',
              }"
            >
              <template v-slot:loading>
                <uv-loading-icon mode="spinner"></uv-loading-icon>
              </template>
            </uv-image>
          </view>
        </view>
      </view>
      <view class="list">
        <view class="title" @click="listShow(2)">
          <uv-text align="left" color="#000000" size="30rpx" :text="`如何戴机监测？`"></uv-text>
          <uv-text align="right" :color="'#666666'" size="26rpx" text=""></uv-text>
        </view>
        <view class="content" :class="{ 'expand-content': true, open: listShow2 }">
          <view class="active">
            <text class="title-font">一、涂抹导电膏并穿戴心电衣</text>
            <text class="info">
              1、用手指蘸取导电膏均匀涂抹在心电衣内侧每一个电极表面，每穿戴 24
              小时建议重复涂抹一次。
            </text>
            <text class="info">
              2、按穿衣方式标准穿戴心电衣，调整肩带及下摆使其平整舒适，并通过背部
              魔术贴调整贴合程度，确保电极面完全贴合皮肤。
            </text>
            <uv-image
              src="https://ai-ecg-beta.lifesense.com/resources/images/xindianyi.jpg"
              mode="widthFix"
              :customStyle="{
                display: 'block',
                margin: '20rpx auto',
              }"
            >
              <template v-slot:loading>
                <uv-loading-icon mode="spinner"></uv-loading-icon>
              </template>
            </uv-image>
            <text class="title-font">二、安装记录仪</text>
            <text class="info">
              将开机后的记录仪如右图调整方向，先对准记录仪按键一侧，使乐心标识在下方，
              再轻按记录仪另一侧完成安装。
            </text>
            <uv-image
              src="https://ai-ecg-beta.lifesense.com/resources/images/jiluyi.jpg"
              mode="widthFix"
              :customStyle="{
                display: 'block',
                margin: '20rpx auto',
              }"
            >
              <template v-slot:loading>
                <uv-loading-icon mode="spinner"></uv-loading-icon>
              </template>
            </uv-image>
            <text class="title-font">三、戴机检查，开启监测</text>
            <text class="info">
              扣好心电记录仪后，拉扯衣服下缘，使得心电衣穿戴平整。如有电极不平整，需要逐个正立平整。
            </text>
            <text class="info">检查页面用户信息正确，三个图标高亮在线。</text>
            <text class="info">点击“开启监护”按钮，进入监护中。</text>
            <uv-image
              src="https://ai-ecg-beta.lifesense.com/resources/images/startMonitor.jpg"
              mode="widthFix"
              :customStyle="{
                display: 'block',
                margin: '20rpx auto',
              }"
            >
              <template v-slot:loading>
                <uv-loading-icon mode="spinner"></uv-loading-icon>
              </template>
            </uv-image>
            <text class="title-font">四、结束监测、上传数据</text>
            <text class="info">
              1、持续戴机到设定时长（一般24小时）或者手动点击“结束监测”按钮，会结束心电监护。此时保持心电记录仪与蓝牙网关在蓝牙通讯范围内（小于10米），记录仪数据会自动上传（此时可脱下心电衣）。
            </text>
            <uv-image
              src="https://ai-ecg-beta.lifesense.com/resources/images/endMonitor.jpg"
              mode="widthFix"
              :customStyle="{
                display: 'block',
                margin: '20rpx auto',
              }"
            >
              <template v-slot:loading>
                <uv-loading-icon mode="spinner"></uv-loading-icon>
              </template>
            </uv-image>
            <text class="info">
              2、等待数据上传完成后，记录仪将自动关机，此时可将心电衣+健康终端+记录仪放回原包装盒，待快递员上门取件，或者自主清洗后待下次使用。
            </text>
          </view>
        </view>
      </view>
      <view class="list">
        <view class="title" @click="listShow(3)">
          <uv-text align="left" color="#000000" size="30rpx" :text="`如何查看报告？`"></uv-text>
          <uv-text align="right" :color="'#666666'" size="26rpx" text=""></uv-text>
        </view>
        <view class="content" :class="{ 'expand-content': true, open: listShow3 }">
          <view class="active">
            <text class="info">1、在首页右下角点击“我的”，跳转到我的页面。</text>
            <uv-image
              src="https://ai-ecg-beta.lifesense.com/resources/images/report-eg3.png"
              mode="widthFix"
              :customStyle="{
                display: 'block',
                margin: '20rpx auto',
              }"
            >
              <template v-slot:loading>
                <uv-loading-icon mode="spinner"></uv-loading-icon>
              </template>
            </uv-image>
            <text class="info">2、在我的页面中“点击查看”我的报告，跳转到我的报告页面。</text>
            <uv-image
              src="https://ai-ecg-beta.lifesense.com/resources/images/report-eg1.png"
              mode="widthFix"
              :customStyle="{
                display: 'block',
                margin: '20rpx auto',
              }"
            >
              <template v-slot:loading>
                <uv-loading-icon mode="spinner"></uv-loading-icon>
              </template>
            </uv-image>
            <text class="info">3、在我的报告页面点击查看详情即可查看报告结论单。</text>
            <uv-image
              src="https://ai-ecg-beta.lifesense.com/resources/images/report-eg2.png"
              mode="widthFix"
              :customStyle="{
                display: 'block',
                margin: '20rpx auto',
              }"
            >
              <template v-slot:loading>
                <uv-loading-icon mode="spinner"></uv-loading-icon>
              </template>
            </uv-image>
          </view>
        </view>
      </view>
      <view class="public-height"></view>
    </view>
  </view>
</template>

<script lang="js" setup>
import navbar from '@/components/navbar'
const { safeAreaInsets } = uni.getWindowInfo()
const listShow1 = ref(true)
const listShow2 = ref(false)
const listShow3 = ref(false)
// -------------------微信分享----------------------
// 分享至好友/群聊
onShareAppMessage((res) => {
  return {
    title: '操作指引',
    path: getCurrentPages()[0].$page.fullPath,
    success: (res) => {},
    fail: (res) => {},
  }
})
// 分享到朋友圈
onShareTimeline((res) => {
  return {
    title: '操作指引',
    path: getCurrentPages()[0].$page.fullPath,
    success: (res) => {},
    fail: (res) => {},
  }
})

const listShow = (index) => {
  switch (index) {
    case 1:
      listShow1.value = !listShow1.value
      listShow2.value = false
      listShow3.value = false
      break
    case 2:
      listShow2.value = !listShow2.value
      listShow1.value = false
      listShow3.value = false
      break
    case 3:
      listShow3.value = !listShow3.value
      listShow2.value = false
      listShow1.value = false
      break
  }
}
</script>

<style lang="scss" scoped>
.list {
  position: relative;
  margin-bottom: 30rpx;
  background: #ffffff;
  border-radius: 20rpx 20rpx;
  .title {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: -webkit-fill-available;
    padding: 24rpx 30rpx;
    background: linear-gradient(180deg, #eef5fd 0%, #dfecf6 100%);
    border-radius: 20rpx 20rpx;
  }
  .content {
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 20rpx 30rpx;
    padding-top: 58rpx;
    background: #ffffff;
    border-radius: 30rpx 30rpx;
    .active {
      margin-top: 50rpx;
      .title-font {
        display: block;
        margin: 20rpx 10rpx 20rpx 0;
        font-size: 32rpx;
        font-weight: 600;
        color: $uv-primary;
      }
    }
    .info {
      display: block;
      margin-left: 10rpx;
      font-size: 26rpx;
      line-height: 50rpx;
      color: #666666;
      text-indent: 2rem;
    }
  }
  .expand-content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.5s ease-in-out;
  }

  .expand-content.open {
    max-height: 300vh; /* 根据内容实际高度调整 */
    opacity: 1;
  }
}
</style>
